<template>
  <div>
    <div class="step-container vux-1px-t">
      <div class="flex flex-space-between step">
        <div class="text-center flex-auto line">
          <p class=""><i class="icon icon-gou step-index"></i></p>
          <p class="title"><b>手机号注册</b></p>
        </div>
        <div class="text-center flex-auto line">
          <p><span class="step-index">2</span></p>
          <p class="title"><b>企业认证</b></p>
        </div>
      </div>
    </div>
    <p class="text-orange" style="height: 0.6rem; line-height: 0.55rem; padding-left: 0.15rem;">请填写企业的真实信息，审核通过后将不能修改</p>
    <div>
      <group title="">
        <x-input title="企业全称   " v-model="realname" class="weui-vcode" placeholder="与开户行名称一致"></x-input>
        <x-input title="企业简称   "  v-model="formItem.short_name"class="weui-vcode" placeholder="如：XX物流（东山分店）"></x-input>
        <x-input title="营业执照注册号" :max="18" v-model="formItem.license" class="weui-vcode" placeholder="三证合一统一社会信用代码18位"></x-input>
        <x-input title="企业地址   " readonly @click.native="showPopup = true" v-model="formItem.address"class="weui-vcode" placeholder="选择企业地址"></x-input>
        <x-input title="企业业务电话 " v-model="formItem.tel" class="weui-vcode" placeholder="企业业务电话"></x-input>
        <!--<x-input title="开户名称   " v-model="formItem.account_name" class="weui-vcode" placeholder="开户行名称"></x-input>-->
        <!--<x-input title="开户银行   " readonly v-model="bankname" class="weui-vcode" placeholder="请选择开户银行" @click.native="typeShow = true" ></x-input>-->
        <!--<x-input title="开户支行   " v-model="formItem.bank" class="weui-vcode" placeholder="支行名称"></x-input>-->
        <!--<x-input title="开户账号   " :max="23" v-model="formItem.num" class="weui-vcode" placeholder="企业基本户账号"></x-input>-->
      </group>
    </div>
    <div class="uploadID">
      <div class="flex flex-space-between upload">
        <div class="shouchi">
          <input class="file" name="file0" id="upload0" type="file" accept="capture=camera" @change="update(0)"/>
          <p v-if="!card_img_1">
            <i class="icon icon-plus1"></i>
          </p>
          <p v-if="!card_img_1">上传营业执照照片</p>
          <div id="preview0" class="preview-box"></div>
        </div>
        <div class="shouchi">
          <input class="file" name="file1" id="upload1" type="file" accept="capture=camera" @change="update(1)"/>
          <p v-if="!card_img_2"><i class="icon icon-plus1"></i></p>
          <p v-if="!card_img_2">上传门店照片(可选)</p>
          <div id="preview1" class="preview-box"></div>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="typeShow" position="bottom" style="height: 100%;background: #f3f4f5;">
        <div class="map-header">
          <div style="flex: 1;">
            <x-input v-model="search" placeholder="输入查询银行" style="border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0.1rem 0.2rem;">
            </x-input>
          </div>
          <div style="width: 1rem; text-align: center;" @click="typeShow = false">取消</div>
        </div>
        <div class="banklist">
          <ul style="margin: 0; padding: 0;">
            <li
              @click="selectBank(index)"
              v-if="item.name.indexOf(search) >= 0"
              class="vux-1px-b"
              :key="index"
              v-for="(item, index) in typeList">{{ item.name }}</li>
          </ul>
        </div>
      </popup>
    </div>
    <div style="padding: 0.2rem;">
      <x-button type="primary" :show-loading="loading" @click.native="subUplaod" action-type="button">提交审核</x-button>
    </div>
    <div ref="mapWrapper" class="amap-wrapper" :class="{'amap-wrapper-show': showPopup}">
      <g-map
        :map-address="showPopup"
        @cancle="showPopup = false"
        @submit="handleMapData"
        :columns="2"
        @setab="setMapPosition"
        @setfixed="setMapPosition"
        :mapdata="mapdata"
        :is-open="showPopup"
        :box-change="false"
        :is-show-tag="false"
        :is-check-phone="false"
        :is-dingwei="false"
        @start="getStart"
      >
      </g-map>
    </div>
  </div>
</template>
<script>
  import PubHeader from '../../components/PubHeader.vue'
  import { checkTel } from '../../libs/fn'
  import { TransferDom, Cell } from 'vux'
  export default{
    beforeRouteEnter (to, from, next) {
      const backgo = from.path == '/user/selectAuthentication' ? -2: -1
      next(vm => {
        vm.backgo = backgo
      })
    },
    directives: {
      TransferDom
    },
    created() {
      this.$http.post($config.host + '/api/Bank/getAllBank', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const {code, data, msg} = res.data
        if(code == '1') {
          data.bank.splice(0, 1)  //删除支付宝
          this.typeList = data.bank
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    components: {
      PubHeader,
      Cell
    },
    watch: {
      realname: function (val) {
        this.formItem.account_name = val
      }
    },
    data() {
      return {
        mapdata: {},
        showPopup: false,
        bankname: '',
        typeShow: false,
        search: '',
        typeList: [],
        realname: '',
        formItem: {
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          city_code: this.$store.state.userInfo.city_code,
          name: '',
          short_name: '',
          service: '',
          license: '',
          address: '',
          tel: '',
          lng: 0,
          lat: 0,
          account_name: '',
          num: '',
          bank_id: '',
          bank: ''
        },
        card_img_1: '',
        card_img_2: '',
        loading: false,
        startAddress: {
          firstAddress: '',
          phone: '',
          lng: '',
          lat: ''
        },
        backgo: -1
      }
    },
    methods: {
      setMapPosition(position) {
        this.$refs['mapWrapper'].style.position = position;
      },
      handleMapData(data) {
        this.formItem.address = data.firstAddress +  data.detailsAddress
        this.formItem.lng = data.lng
        this.formItem.lng = data.lat
      },
      getStart(data) {
        this.startAddress.firstAddress = data.firstAddress
        this.startAddress.phone = data.phone
        this.startAddress.lng = data.lng
        this.startAddress.lat = data.lat
      },
      selectBank(index) {
        this.formItem.bank_id = this.typeList[index].id
        this.bankname = this.typeList[index].name
        this.typeShow = false
      },
      subUplaod() {
        this.formItem.name = this.realname
        if (!this.formItem.name){
          this.$vux.toast.text('请填写企业全称', 'middle')
          return false
        }
        if (!this.formItem.short_name){
          this.$vux.toast.text('请填写企业简称', 'middle')
          return false
        }
        if(this.formItem.license.length != 18){
          this.$vux.toast.text('请输入有效的营业执照注册号', 'middle')
          return false
        }
        if(!this.formItem.lng){
          this.$vux.toast.text('请填写企业地址', 'middle')
          return false
        }

        const zuoji = /^(\d{3,4}\-)?\d{7,8}$/i   //有 - 的座机
        const zuoji2 = /^0(([1-9]\d)|([3-9]\d{2}))\d{8}$/  //没有输入 - 的座机号码
        if(!checkTel(this.formItem.tel) && !zuoji.test(this.formItem.tel) && !zuoji2.test(this.formItem.tel)){
          this.$vux.toast.text('电话格式错误', 'middle')
          return false
        }
//        if (!this.formItem.account_name){
//          this.$vux.toast.text('请填写开户行名称', 'middle')
//          return false
//        }
//        if (!this.formItem.bank_id){
//          this.$vux.toast.text('请选择开户银行', 'middle')
//          return false
//        }
//        if (!this.formItem.bank){
//          this.$vux.toast.text('请填写开户支行', 'middle')
//          return false
//        }
//        if(!this.formItem.num.match(/^\d{11,23}$/)){
//          this.$vux.toast.text('开户帐号格式错误', 'middle')
//          return false
//        }
        if (!this.card_img_1){
          this.$vux.toast.text('请上传营业执照', 'middle')
          return false
        }

        let file1 = this.card_img_1,
            file2 = this.card_img_2
        let param = new FormData(); //创建form对象
        if(file2) {
          param.append('image',file2,file2.name);//通过append向form对象添加数据
        }

        param.append('license_img',file1,file1.name);//通过append向form对象添加数据
        for (let i in this.formItem) {
          param.append(i,this.formItem[i]);//添加form表单中其他数据
        }
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };  //添加请求头

        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '确保填写的资料真实有效,资料不完善或证件照片模糊将导致审核失败！',
          confirmText: '继续完善',
          cancelText: '确认提交',
          onCancel: () => {
            this.loading = true
            this.$vux.loading.show({
              text: '上传资料中'
            })
            this.$http.post($config.host + '/api/Identify/companySendIdentify', param, config).then(res=>{
              this.$vux.loading.hide()
              const {code, msg} = res.data
              if(code == 1) {
                this.$router.go(this.backgo)
                this.$vux.toast.text(msg, 'middle')
              } else {
                this.loading = false
                this.$vux.toast.text(msg, 'middle')
              }
            }).catch(err => {
              this.$vux.toast.text($config.errMsg, 'middle')
            })
          }
        })


      },
      update(index) {
        let upload = document.getElementById('upload' + index),
            preview = document.getElementById('preview' + index),
            imgurl = ''
        window.URL = window.URL || window.webkitURL
        let sUserAgent= navigator.userAgent.toLowerCase()
        let selected_file = upload.files[0]
        console.log('ds')
        console.log(selected_file)
        if(index === 0) {
          this.card_img_1 = selected_file
        } else if(index === 1) {
          this.card_img_2 = selected_file
        } else if(index === 2) {
          this.card_img_3 = selected_file
        }
        if(sUserAgent.match(/android/i) == "android"){
          let img = new Image()
          img.src = window.URL.createObjectURL(selected_file)
          preview.innerHTML = ''
          preview.appendChild(img)
          img.style.width = '100%'
          img.style.height = '100%'
          let reader = new FileReader()
          reader.onload = function(e) { imgurl = e.target.result }
          reader.readAsDataURL(selected_file)
        }else{
          //判断文件类型是否为图片
          let imageType = /image.*/
          if (!selected_file.type.match(imageType)) {
            return false
          }
          let img = document.createElement('img')
          img.style.width = '100%'
          img.style.height = '100%'
          img.file = selected_file
          preview.innerHTML = ''
          preview.appendChild(img)

          img.onload = function(){
            imgurl = img.src
          }

          var reader = new FileReader();
          reader.onload = function(e) { img.src = e.target.result; };
          reader.readAsDataURL(selected_file);
        }
      }
    }
  }
</script>
<style scoped>
.preview-box{
  width: 3.45rem;
  height: 2.25rem;
  left: 0;
  top: 0rem;
  position: absolute;
  z-index: 4;
  overflow: hidden;
}
.preview-box img{
  display: block;
  width:100%;
  height: 100%;
}
.shouchi{
  position: relative;
}
.file{
  width: 3.45rem;
  height: 2.25rem;
  left: 0;
  top: 0rem;
  opacity: 0;
  position: absolute;
  z-index: 6;
}
.upload{
  flex-wrap:  wrap;
  position: relative;
}
.upload > div{
  width: 3.45rem;
  height: 2.25rem;
  border:1px solid #e5e5e5;
  border-radius: 0.1rem;
  text-align: center;
  margin-top: 0.15rem;
}
.upload .icon{
  font-size: 1rem;
  color: #999;
}
.step-container{
  height: 1.8rem;
  background: #fff;
  margin-bottom: 0.15rem;
  padding-top: 0.4rem;
}

.step{
  height: 1rem; margin: 0px auto;
  width: 5rem;
  position: relative;
}
.step .line:after{
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0.22rem;
  margin-left: 0.23rem;
  margin-right: 0.23rem;
  content: '';
  height: 1px;
  transform: scaleY(0.5);
  background: #ff5722;
}
.step-index.icon{
  background: #ff5722;
  color: #fff;
}
.step-index{
  font-size: 0.3rem;
  height: 0.45rem;
  line-height: 0.42rem;
  width: 0.45rem;
  color: #ff5722;
  border: 1px solid #ff5722;
  display: inline-block;
  border-radius: 50%;
}
.step .title{
  font-size: 0.26rem;
  line-height: 0.6rem;color: #ff5722;
}
  .uploadID{
    margin-top: 0.15rem;
    background: #fff;
    padding: 0.2rem;
  }

.map-header{
  position: fixed;
  z-index: 7;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
  transition: all 0.4s;
  box-shadow: 0px 0px 0.1rem rgba(0, 0, 0, 0.15);
}
.banklist{
  background: #fff;
  margin-top: 1rem;
  padding-left: 0.2rem;
}
.banklist li{
  height: 0.9rem;
  line-height: 0.9rem;
  padding-left: 0.1rem;
}
</style>
